<!--销售机会列表  ————————  客户经理和销售主管可查看 -->
<template>
  <div class="salesChance">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">营销管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>销售机会管理</strong><span>/</span></li>
        <li><strong>销售机会列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">销售机会列表</span>
          <router-link to="CreatSalesChance"  class="btn btn-success" style="float: right;margin-top: 10px">创建销售机会</router-link>
        </div>

        <form action="">
          <div class="row" style="margin-bottom: 30px">
            <div class="col-sm-1 col-md-1"></div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4 v-show="role == '老板' || role == '销售主管'">开发者:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <select v-model="saleVo.staffId" v-show="role == '老板' || role == '销售主管'" class="form-control" style="width: 180px">
                <option value="0" >-请选择-</option>
                <option v-for="item in accountManagers" :value="item.staffId">{{item.staffName}}</option>
              </select>
            </div>
            <div class="col-sm-1 col-md-1 text-center" style="padding: 0px">
              <h4>状态:</h4>
            </div>
            <div class="col-sm-3 col-md-3">
              <select v-model="saleVo.saleType" class="form-control" style="width: 180px">
                <option value="" >-请选择-</option>
                <option v-for="item in saleTypes" :value="item.dictionaryValue">{{item.dictionaryEntry}}</option>
              </select>
            </div>
            <div class="col-sm-2 col-md-2">
              <button v-on:click="loadSales" class="btn btn-primary">查询</button>
            </div>
          </div>

        </form>
        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>客户名字</th>
            <th>概要</th>
            <th>联系人</th>
            <th>联系人电话</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in salesChances">
            <th scope="row">{{index+1}}</th>
            <td>{{item.customerName}}</td>
            <td>{{item.saleOutline}}</td>
            <td>{{item.contactsName}}</td>
            <td>{{item.contactsTel1}}</td>
            <td>{{item.createTime}}</td>
            <td>
              <button v-show="role == '老板' || role=='销售主管'" v-on:click="toAssignSalesChance(item.saleId)" class="btn btn-default btn-sm">指派</button>
              <button v-show="item.saleState == '未指派'" v-on:click="toUpdateSale(item.saleId)" class="btn btn-primary btn-sm">修改</button>
              <button @click="open(item.saleId,item.customerName)" v-show="item.saleState == '未指派' && item.saleCreater == staffId" type="button" class="btn btn-danger btn-sm">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "SalesChanceList",
  data(){
    return{
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      salesChances:[],
      accountManagers:[],
      saleTypes:[],
      role:'',
      saleVo:{
        staffId:0,
        saleType:'',
      },
      staffId:''
    }
  },
  methods:{
    toAssignSalesChance(saleId){
      this.$router.push({path:'/MemuBar/AssignSalesChance',query:{saleId:saleId}})
    },
    toUpdateSale(saleId){
      this.$router.push({path:'/MemuBar/UpdateSalesChance',query:{saleId:saleId}})
    },
    getAllAccountManagers() {
      this.staffId=this.$store.getters.getStaff.staffId
      console.log(this.staffId)
      this.role = localStorage.getItem("role")
      this.$axios.get('/staff/loadAllAccountManager').then(
        res=>{
          this.accountManagers = res.data.data
          // console.log(res.data.data)
        }
      )
    },
    getSaleTypes(){
      this.$axios.get('/dictionary/loadSaleTypes').then(
        res=>{
          this.saleTypes = res.data.data
          // console.log(this.saleTypes)
        }
      )
    },
    handleSizeChange(val) {
      this.limit = val;
      this.loadSales()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadSales()
    },
    loadSales(){
      // console.log(this.saleVo.saleType)
      if (this.role == '老板' || this.role == '销售主管'){
        this.$axios.get('/sale/loadAllSale',{
          params:{
            limit:this.limit,
            current:this.current,
            staffId:this.saleVo.staffId,
            saleState:this.saleVo.saleType
          }
        }).then(
          res=>{
            this.total = res.data.data.total
            this.salesChances = res.data.data.myData

          }
        )
      }
      if (this.role == '客户经理'){
        this.$axios.get('/sale/getSalesByAccountManagers',{
          params:{
            limit:this.limit,
            current:this.current,
            staffId:this.$store.getters.getStaff.staffId,
            saleState:this.saleVo.saleType
          }
        }).then(
          res=>{
            this.total = res.data.data.total
            this.salesChances = res.data.data.myData
          }
        )
      }
    },
    open(saleId,customerName) {
      this.$confirm('此操作将永久删除与 【'+customerName+'】 销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete("/sale/deleteSale",{
          params:{
            saleId:saleId
          }
        }).then(
          res=>{
            this.$message({
              type: 'success',
              message: res.data.message
            });
            this.$router.go(0);
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.getAllAccountManagers()
    this.getSaleTypes()
    this.loadSales()
  }
}
</script>

<style scoped>

</style>
